<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="bootstrap-5.3.3-dist/css/bootstrap.min.css">
</head>
<body>
    <div id="app">
        <div class="container">
            <h1 align="center" style="padding: 10px;">学生信息管理</h1>
            <div class="card">
                <div class="card-body">
                    <table class="table table-bordered border-primary align-middle">
                        <tr align="center"> 
                            <th>编号</th>
                            <th>姓名</th>
                            <th>年龄</th>
                            <th>性别</th>
                            <th>联系电话</th>
                            <th>操作</th>
                        </tr>
                        <tr v-for="(s,i) in students" align="center" :key="i">
                            <td>{{s.stuId}}</td>
                            <td>{{s.name}}</td>
                            <td>{{s.age}}</td>
                            <td>{{s.sex}}</td>
                            <td>{{s.phone}}</td>
                            <td>
                                <button type="button" class="btn btn-outline-danger" @click="del(s.stuId,i)">删除</button>
                                <button type="button" class="btn btn-outline-info" data-bs-toggle="modal" data-bs-target="#staticBackdrop" @click="edit(s,i)">修改</button>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="container mt-5" style="width: 500px;">
            <div class="card text-center">
                <div class="card-header">
                    添加学生
                </div>
                <div class="card-body">
                    <div class="mb-3 row">
                        <label for="stuName" class="col-sm-3 col-form-label">学生姓名：</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="stuName" v-model="stu.name">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="stuAge" class="col-sm-3 col-form-label">学生年龄：</label>
                        <div class="col-sm-8">
                            <input type="number" class="form-control" id="stuAge" v-model="stu.age">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="stuSex" class="col-sm-3 col-form-label">学生性别：</label>
                        <div class="col-sm-3">
                            <input type="radio" name="sex" id="man" value="男" v-model="stu.sex"><label for="man">&nbsp;男</label>&nbsp;&nbsp;
                            <input type="radio" name="sex" id="woman" value="女" v-model="stu.sex"><label for="woman">&nbsp;女</label>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="stuPhone" class="col-sm-3 col-form-label">联系电话：</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="stuPhone" v-model="stu.phone">
                        </div>
                    </div>
                    <button type="button" class="btn btn-outline-primary" @click="insert()">添加</button>
                </div>
            </div>
        </div>
        <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <h1 class="modal-title fs-5" id="staticBackdropLabel">修改学生信息</h1>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3 row">
                        <label for="stuId" class="col-sm-3 col-form-label">学生编号：</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="stuId" v-model="updateStu.stuId" disabled>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="stuName" class="col-sm-3 col-form-label">学生姓名：</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="stuName" v-model="updateStu.name">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="stuAge" class="col-sm-3 col-form-label">学生年龄：</label>
                        <div class="col-sm-8">
                            <input type="number" class="form-control" id="stuAge" v-model="updateStu.age">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="stuSex" class="col-sm-3 col-form-label">学生性别：</label>
                        <div class="col-sm-3">
                            <input type="radio" name="sex" id="man" value="男" v-model="updateStu.sex">&nbsp;男&nbsp;&nbsp;
                            <input type="radio" name="sex" id="woman" value="女" v-model="updateStu.sex">&nbsp;女
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="stuPhone" class="col-sm-3 col-form-label">联系电话：</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="stuPhone" v-model="updateStu.phone">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                  <button type="button" class="btn btn-primary" data-bs-dismiss="modal" @click="update()">保存</button>
                </div>
              </div>
            </div>
          </div>
    </div>
    <script src="bootstrap-5.3.3-dist/js/bootstrap.min.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/jquery-3.7.1.js"></script>
    <script src="js/index.js"></script>
</body>
</html>